import styles from './index.less';
import React, { useState, useEffect, memo } from 'react';
import imgSrc from '../../images/location-fill.png';
import { connect } from 'umi';
import DoubleRingChart from './DoubleRingChart';
import moment from 'moment';
import cls from 'classnames';

import Statistics from './statistics';
import PeopleInfo from './peopleInfo';
// const statusArr = ['筹备', '立项', '在建', '完工', '停工'];

const TopPanel = ({ curProj }) => {
  const [progressValue, setProgressValue] = useState(0);
  const [workingDays, setWorkingDays] = useState(0);
  const [fullDays, setFullDays] = useState(0);

  useEffect(() => {
    const _workingDays = moment(moment.now()).diff(moment(curProj.startDate), 'days');
    const _fullDays = moment(curProj.completeDate).diff(moment(curProj.startDate), 'days');
    let _progressValue = Math.round((_workingDays * 100) / _fullDays);
    _progressValue = _progressValue > 100 ? 100 : _progressValue;
    console.log(_workingDays, _fullDays, curProj.startDate, curProj.completeDate);
    setProgressValue(_progressValue);
    setWorkingDays(_workingDays);
    setFullDays(_fullDays);
  }, [curProj]);

  return (
    <div className={styles.topPanel}>
      <div className={styles.topPanelL}>
        <DoubleRingChart progressValue={progressValue} />
      </div>
      <div className={styles.topPanelR}>
        <p className={styles.topPanelText}>
          <span className={styles.topPanelTextL}>进度状态：</span>
          {curProj.prjStatus}
        </p>
        <p className={styles.topPanelText}>
          <span className={styles.topPanelTextL}>剩余天数：</span>
          {fullDays - workingDays}天
        </p>
        <p className={styles.topPanelText}>
          <span className={styles.topPanelTextL}>开工累计：</span>
          {workingDays}天
        </p>
        <p className={styles.topPanelText}>
          <span className={styles.topPanelTextL}>项目总工期：</span>
          {curProj.totalWorkTime}
        </p>
        <p className={styles.topPanelText}>
          <span className={styles.topPanelTextL}>预计完工：</span>
          {/* 2021-06-21 */}
          {curProj.completeDate}
        </p>
      </div>
    </div>
  );
};

const BaseInfo = ({ curProj }) => {
  return (
    <div className={styles.baseInfo}>
      <div className={styles.title} style={{ minHeight: 56 }}>
        {curProj.name}
      </div>
      <p>
        建设地址
        <span className={styles.baseInfoLocation}>{curProj.address}</span>
      </p>
      <p>
        建设单位：
        <span className={styles.baseInfoText}> {curProj.construct}</span>
      </p>
      <p>
        工期：
        <span className={styles.baseInfoText}> {curProj.totalWorkTime}</span>
      </p>
      <p>
        项目类型：<span className={styles.baseInfoText}>{curProj.projectType}</span>
      </p>
      <p>
        项目投资：<span className={styles.baseInfoText}>{curProj.invest}</span>
      </p>
      <p>
        开工日期：<span className={styles.baseInfoText}>{curProj.startDate}</span>
      </p>
      <p>
        预计完工日期：<span className={styles.baseInfoText}>{curProj.completeDate}</span>
      </p>
    </div>
  );
};

const RightContent = ({ curProj }) => {
  if (!curProj) {
    return null;
  }

  return (
    <div>
      <div className="side-panel2" style={{ top: 144, left: 24, width: 370 }}>
        <div className="side-panel2-title">基本信息</div>
        <div
          className={cls('side-panel2-body', styles.autoHeightPanel2)}
          style={{
            paddingLeft: 24,
            paddingTop: 22,
            height: 540,
          }}
        >
          <BaseInfo curProj={curProj}></BaseInfo>
        </div>
      </div>

      <div className="side-panel2" style={{ top: 148, right: 24, width: 370 }}>
        <div className="side-panel2-title">进度管理</div>
        <div className={cls('side-panel2-body', styles.autoHeightPanel2)} style={{ height: 540 }}>
          <div className="side-panel2-subtitle" style={{ paddingLeft: 24, paddingTop: 24 }}>
            项目进度
          </div>
          <TopPanel curProj={curProj} />
          <PeopleInfo />
        </div>
      </div>
      {/* 产值统计 */}
      <Statistics location="left" />
    </div>
  );
};

// export default RightContent;

export default connect(({ app }) => {
  return {
    // isGlobalProcessRender: app.isGlobalProcessRender,
    curProj: app.curProj,
    // sectionProgress: projectPage.sectionProgress,
  };
})(RightContent);
